<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外贸企业分布地图 - 调试版</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/echarts/5.5.0/echarts.min.js"></script>
    <style>
        body {
            margin: 0;
            padding: 20px;
            font-family: Arial, sans-serif;
            background: #f0f2f5;
        }
        
        .container {
            max-width: 1200px;
            margin: 0 auto;
        }
        
        .debug-panel {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin-bottom: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }
        
        .debug-panel h3 {
            margin: 0 0 10px 0;
            color: #333;
        }
        
        .debug-info {
            font-family: monospace;
            background: #f8f9fa;
            padding: 10px;
            border-radius: 4px;
            white-space: pre-wrap;
            max-height: 200px;
            overflow-y: auto;
        }
        
        .map-container {
            background: white;
            border-radius: 8px;
            padding: 20px;
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
            height: 600px;
            position: relative;
        }
        
        .chart-wrapper {
            width: 100%;
            height: 100%;
        }
        
        .loading {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            text-align: center;
        }
        
        .error {
            color: #e74c3c;
            background: #fdf2f2;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #e74c3c;
            margin: 10px 0;
        }
        
        .success {
            color: #27ae60;
            background: #f0fff4;
            padding: 15px;
            border-radius: 4px;
            border: 1px solid #27ae60;
            margin: 10px 0;
        }
        
        .btn {
            background: #3498db;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        
        .btn:hover {
            background: #2980b9;
        }
        
        .spinner {
            border: 4px solid #f3f3f3;
            border-top: 4px solid #3498db;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            animation: spin 1s linear infinite;
            margin: 0 auto 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="container">
            <h1>外贸企业分布地图 - 调试版</h1>
            
            <div class="debug-panel">
                <h3>调试信息</h3>
                <div class="debug-info">{{ debugInfo }}</div>
                <button class="btn" @click="clearDebug">清除日志</button>
                <button class="btn" @click="testEcharts">测试ECharts</button>
                <button class="btn" @click="testMapData">测试地图数据</button>
                <button class="btn" @click="initMap">重新初始化地图</button>
            </div>
            
            <div v-if="status.echarts" class="success">
                ✓ ECharts 加载成功
            </div>
            
            <div v-if="status.mapData" class="success">
                ✓ 地图数据加载成功（{{mapDataInfo}}）
            </div>
            
            <div v-if="status.chart" class="success">
                ✓ 图表初始化成功
            </div>
            
            <div v-if="error" class="error">
                ❌ 错误: {{ error }}
            </div>
            
            <div class="map-container">
                <div ref="chartContainer" class="chart-wrapper"></div>
                
                <div v-if="loading" class="loading">
                    <div class="spinner"></div>
                    <p>正在加载地图...</p>
                </div>
            </div>
        </div>
    </div>

    <script>
        const { createApp } = Vue

        createApp({
            data() {
                return {
                    chart: null,
                    loading: false,
                    error: null,
                    debugInfo: '调试日志:\n',
                    status: {
                        echarts: false,
                        mapData: false,
                        chart: false
                    },
                    mapDataInfo: '',
                    // 外贸企业数据
                    provinceData: {
                        '广东省': { count: 245.5, category: '核心集聚区' },
                        '浙江省': { count: 132.8, category: '核心集聚区' },
                        '江苏省': { count: 128.6, category: '核心集聚区' },
                        '上海市': { count: 98.7, category: '核心集聚区' },
                        '福建省': { count: 86.4, category: '海峡经济区' },
                        '山东省': { count: 78.9, category: '沿海发达区' },
                        '北京市': { count: 65.2, category: '环渤海区' },
                        '香港特别行政区': { count: 58.3, category: '国际枢纽' },
                        '台湾省': { count: 52.1, category: '海峡经济区' },
                        '四川省': { count: 42.3, category: '西部增长极' },
                        '湖北省': { count: 38.7, category: '中部枢纽' },
                        '河南省': { count: 36.5, category: '中部枢纽' },
                        '湖南省': { count: 34.2, category: '中部枢纽' },
                        '安徽省': { count: 32.8, category: '中部枢纽' },
                        '辽宁省': { count: 29.4, category: '环渤海区' },
                        '天津市': { count: 28.1, category: '环渤海区' },
                        '河北省': { count: 26.7, category: '环渤海区' },
                        '江西省': { count: 24.3, category: '中部枢纽' },
                        '广西壮族自治区': { count: 22.5, category: '西部增长极' },
                        '重庆市': { count: 20.8, category: '西部增长极' },
                        '陕西省': { count: 19.2, category: '西部增长极' },
                        '澳门特别行政区': { count: 18.6, category: '国际枢纽' },
                        '云南省': { count: 17.6, category: '西部增长极' },
                        '黑龙江省': { count: 15.3, category: '东北区' },
                        '吉林省': { count: 14.1, category: '东北区' },
                        '山西省': { count: 13.4, category: '中部枢纽' },
                        '贵州省': { count: 11.8, category: '西部增长极' },
                        '甘肃省': { count: 10.2, category: '西部增长极' },
                        '海南省': { count: 9.7, category: '沿海发达区' },
                        '内蒙古自治区': { count: 8.9, category: '北部边疆区' },
                        '新疆维吾尔自治区': { count: 7.5, category: '西部边疆区' },
                        '西藏自治区': { count: 5.2, category: '西部边疆区' },
                        '宁夏回族自治区': { count: 4.8, category: '西部增长极' },
                        '青海省': { count: 4.1, category: '西部增长极' }
                    }
                }
            },
            mounted() {
                this.log('页面加载完成')
                this.testEcharts()
                setTimeout(() => {
                    this.initMap()
                }, 1000)
            },
            methods: {
                log(message) {
                    const time = new Date().toLocaleTimeString()
                    this.debugInfo += `[${time}] ${message}\n`
                },
                
                clearDebug() {
                    this.debugInfo = '调试日志:\n'
                },
                
                testEcharts() {
                    this.log('测试ECharts加载状态...')
                    if (window.echarts) {
                        this.status.echarts = true
                        this.log('ECharts加载成功，版本: ' + echarts.version)
                    } else {
                        this.log('ECharts未加载或加载失败')
                    }
                },
                
                async testMapData() {
                    this.log('测试地图数据加载...')
                    try {
                        const response = await fetch('https://geo.datav.aliyun.com/areas/bound/100000_full.json')
                        this.log('数据请求状态: ' + response.status)
                        
                        if (!response.ok) {
                            throw new Error('网络请求失败: ' + response.status)
                        }
                        
                        const data = await response.json()
                        this.status.mapData = true
                        this.mapDataInfo = `${data.features.length}个省份`
                        this.log('地图数据加载成功: ' + this.mapDataInfo)
                        
                        // 显示前几个省份名称
                        const provinces = data.features.slice(0, 5).map(f => f.properties.name)
                        this.log('前5个省份: ' + provinces.join(', '))
                        
                    } catch (error) {
                        this.log('地图数据加载失败: ' + error.message)
                        this.error = '地图数据加载失败: ' + error.message
                    }
                },
                
                async initMap() {
                    try {
                        this.loading = true
                        this.error = null
                        this.log('开始初始化地图...')
                        
                        // 检查ECharts
                        if (!window.echarts) {
                            throw new Error('ECharts未加载')
                        }
                        this.log('ECharts检查通过')
                        
                        // 检查容器
                        const container = this.$refs.chartContainer
                        if (!container) {
                            throw new Error('图表容器未找到')
                        }
                        this.log('图表容器检查通过')
                        
                        // 加载地图数据
                        this.log('开始加载地图数据...')
                        const mapData = await this.loadMapData()
                        this.log('地图数据加载完成')
                        
                        // 注册地图
                        echarts.registerMap('china', mapData)
                        this.log('地图注册完成')
                        
                        // 创建图表
                        if (this.chart) {
                            this.chart.dispose()
                        }
                        this.chart = echarts.init(container)
                        this.log('图表实例创建完成')
                        
                        // 准备数据
                        const chartData = Object.keys(this.provinceData).map(name => ({
                            name,
                            value: this.provinceData[name].count
                        }))
                        this.log('图表数据准备完成，共' + chartData.length + '项')
                        
                        // 设置配置
                        const option = {
                            title: {
                                text: '全国外贸企业分布热力图',
                                left: 'center',
                                top: 10,
                                textStyle: {
                                    color: '#333'
                                }
                            },
                            tooltip: {
                                trigger: 'item',
                                formatter: (params) => {
                                    const data = this.provinceData[params.name]
                                    if (!data) return params.name + '<br/>暂无数据'
                                    return `
                                        <strong>${params.name}</strong><br/>
                                        企业数量: ${data.count} 万家<br/>
                                        区域类别: ${data.category}
                                    `
                                }
                            },
                            visualMap: {
                                min: 0,
                                max: 300,
                                left: 'left',
                                top: 'bottom',
                                text: ['高', '低'],
                                inRange: {
                                    color: ['#e0f3ff', '#006edd']
                                }
                            },
                            series: [
                                {
                                    name: '外贸企业数量',
                                    type: 'map',
                                    mapType: 'china',
                                    roam: false,
                                    data: chartData,
                                    emphasis: {
                                        label: {
                                            show: true
                                        }
                                    }
                                }
                            ]
                        }
                        
                        this.chart.setOption(option)
                        this.log('图表配置设置完成')
                        
                        this.status.chart = true
                        this.loading = false
                        this.log('地图初始化完成！')
                        
                    } catch (error) {
                        this.loading = false
                        this.error = error.message
                        this.log('地图初始化失败: ' + error.message)
                        console.error('地图初始化失败:', error)
                    }
                },
                
                async loadMapData() {
                    const response = await fetch('https://geo.datav.aliyun.com/areas/bound/100000_full.json')
                    if (!response.ok) {
                        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
                    }
                    return await response.json()
                }
            }
        }).mount('#app')
    </script>
</body>
</html> 